
var requestCount = 0;

Ext.onReady(function(){
	
	 Ext.QuickTips.init();
	
	var win = new Ext.Window({
		title: 'Login',
		width: 300,
		closeable: false,
		resizable: false,
		border: true,
		items:[
		       new Ext.FormPanel({
		    	   id: 'login-panel',
		    	   labelWidth: 70,
		    	   frame: true,
		    	   defaultType: 'textfield',
		    	   keys: new Ext.KeyMap(document, {
		    		   key: Ext.EventObject.ENTER,
		    		   fn: function(){
		    		   		// submit
	    					logar();
		    	   		},
		    	   		scope: this
		    	   }),
		    	   items:[{
		    		   	   id: 'fieldUsuario',
			    		   fieldLabel: 'Usuário',
			    		   name: 'user',
			    		   allowBlank: false,
			    		   invalidClass: 'erroCampo'
			    	   },{
		    		   	   id: 'fieldSenha',
			    		   fieldLabel: 'Senha',
			    		   name: 'senha',
			    		   inputType: 'password',
			    		   allowBlank: false,
			    		   invalidClass: 'erroCampo'
			    	   },{
			    		   xtype: 'panel',
			    		   html: '<div style="float:right; margin-top: 5px;margin-right: 20px;color: #CCC"><a onclick="abrirCadastroUsuario()" style="padding:5px">Cadastre-se</a></div></div>'
			    	}],
			    	buttons: [{
			    			text: 'Entrar',
			    			handler: function(){
			    				// submit
			    				logar();
			    			}
			    		},{
			    			text: 'Limpar',
			    			handler: function(){
			    				Ext.getCmp('login-panel').getForm().reset();
			    				Ext.getCmp('fieldUsuario').focus();
			    			}
			    	}]
		       })
		]
	});
	
	win.show();
	setTimeout("Ext.getCmp('fieldUsuario').focus()", 300);
});

function logar (){
	showLoading();
	Ext.getCmp('login-panel').getForm().submit({
		url: 'doLogon.html',
		method: 'POST',
		success: function(form, action){
			hideLoading();
			window.location.href = 'aplicacao.html';
		},
		failure: function(form, action){
			hideLoading();
			Ext.MessageBox.show({
				title:'Calma lá!',
				buttons: Ext.MessageBox.OK,
				icon: Ext.MessageBox.ERROR,
				msg: action.result.errorMsg			    							
			});	    						
		}
	});
};

function abrirCadastroUsuario(){

	Ext.getCmp('fieldUsuario').reset();
	Ext.getCmp('fieldSenha').reset();
	   
	var win = new Ext.Window({
	    id: 'adicionarUsuarioWindow',
	    title: 'Cadastrar',
		width: 290,
		items:[{
			xtype: 'form',
			id: 'cadastrarUsuarioForm',
			url: '/cadastrarUsuario.html',
			labelWidth: 130,
			defaultType: 'textfield',
	        bodyStyle:'padding:5px',
			labelSeparator: ':',
			modal: true,
			closeable: true,
			resizable: false,
			border: true,
			buttonAlign: 'center',
			items:[{
				fieldLabel: 'Usuário',
				name: 'user',
				maxLength: 20,
	    		allowBlank: false,
	    		blankText: 'Informe o seu nome de usuário.',
	    		invalidClass: 'erroCampo'
			},{
				fieldLabel: 'Nome'	,
				name: 'nome',
				maxLength: 20,
	    		allowBlank: false,
	    		blankText: 'Informe o seu nome.',
	    		invalidClass: 'erroCampo'
			},{
				fieldLabel: 'Sobrenome',
				name: 'sobrenome',
				maxLength: 20,
	    		allowBlank: false,
	    		blankText: 'Informe o seu sobrenome.',
	    		invalidClass: 'erroCampo'
			},{
				id: 'cadastroSenha',
				fieldLabel: 'Senha',
				name: 'senha',
				inputType: 'password',
				maxLength: 20,
	    		allowBlank: false,
	    		blankText: 'Informe a sua senha.',
	    		invalidClass: 'erroCampo'
			},{
				id: 'cadastroConfirmacao',
				fieldLabel: 'Confirme nova Senha',
				inputType: 'password',
				maxLength: 20,
	    		allowBlank: false,
	    		blankText: 'Confirme a sua senha.',
	    		invalidClass: 'erroCampo'
			}],
			buttons: [{
				text: 'Cadastrar',
				handler: function(){
					
					var form = Ext.getCmp('cadastrarUsuarioForm').getForm();
					
					// Validando se a senha é igual à confirmação de senha
					var senha = Ext.getCmp('cadastroSenha');
					var confirmacao = Ext.getCmp('cadastroConfirmacao');
					
					if (senha.getValue() != confirmacao.getValue()){
						form.markInvalid([{id:'cadastroConfirmacao', msg:'A confirmação não confere com a senha informada!'}]);
						
						Ext.Msg.show({
							   title:'Que pena!',
							   msg: 'A confirmação não confere com a senha informada!',
							   buttons: Ext.Msg.OK,
							   icon: Ext.MessageBox.ERROR
							});
						
						return;
					}
					
					form.submit({
						success: function(form, action){
							Ext.Msg.show({
								   title:'Uhul!',
								   msg: 'Você foi cadastrado ' + action.result.usuarioCadastrado + '! Bem vindo ao Quanto Eu Gasto!<br/>Agora faça o login para cadastrar seus gastos.',
								   fn: function(){
									   Ext.getCmp('adicionarUsuarioWindow').close();
									   setTimeout("Ext.getCmp('fieldUsuario').focus()", 300);
								   },
								   buttons: Ext.Msg.OK,
								   icon: Ext.MessageBox.INFO
								});
						},
						failure: function(form, action){
							Ext.Msg.show({
								   title:'Que pena!',
								   msg: action.result.msg,
								   buttons: Ext.Msg.OK,
								   icon: Ext.MessageBox.ERROR
								});
						}
					});
				}
			},{
				text: 'Fechar',
				handler: function(){
					Ext.getCmp('adicionarUsuarioWindow').close();
					Ext.getCmp('fieldUsuario').focus();
				}
			}]
		}]
	});
	
	win.show();
}

function showLoading(){
	if (requestCount++ == 0){
		Ext.get(document.body).mask('<img src="/images/loading.gif" style="width:124px;height:124px;" align="absmiddle"/><br><font><center><b>Carregando...</b></center></font>');
	}
}

function hideLoading(){
	if (--requestCount == 0){
		Ext.get(document.body).unmask();		
	}
}